import React from 'react';
import { injectIntl } from 'react-intl';
import { Form, Input, Button, Checkbox } from 'antd';
import { connect } from 'dva';
import { Link } from '@/shared/components/RouterLink';
import { FormattedMessage } from '@/shared/translation';
import loginMessages from '@/shared/translation/messages/sign/login';
import test from '@/assets/fee.jpg';
import { signInEffectAction } from '../models';

import './index.less';


const SignIn = ({ dispatch, intl: { messages } }) => {
  const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
  const tailLayout = { wrapperCol: { offset: 8, span: 16 } };
  const onFinish = values => {
    console.log('Success:', values);
    dispatch(signInEffectAction(values));
  };

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="signin-container">
      <div className="title"><FormattedMessage {...loginMessages.title} /></div>
      <img src={test} alt="" />
      <Form
        {...layout}
        name="basic"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label={messages[loginMessages.emailLabel.id]} name="username">
          <Input />
        </Form.Item>

        <Form.Item label={messages[loginMessages.passwordLabel.id]} name="password">
          <Input.Password />
        </Form.Item>

        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <div>
            <Checkbox>Remember me</Checkbox>
            <Link to="/sign/forgotPassword">忘记密码</Link>
          </div>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button htmlType="submit">{messages[loginMessages.loginLabel.id]}</Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default connect(({ login }) => ({
  userLogin: login
}))(injectIntl(SignIn));
